<!-- left half -->
<div class="col-md-6">
  <div class="row">
    <div class="col-md-6">
      <h4>Processor #<span ng-bind="processor.id"></span></h4>
      <h5>{{processor.description}}</h5>
      <property-table
        props-bind="processorInfoTable"
        prop-name-class="col-sm-4 bold"
        prop-value-class="col-sm-8 actor-path">
      </property-table>
    </div>

    <div ng-if="processor.parallelism > 1" class="col-md-6">
      <h4>Receive Throughput Skew</h4>
      <bar-chart
        options-bind="::receiveSkewChart.options"
        datasource-bind="receiveSkewChart.data">
      </bar-chart>
    </div>

    <div class="col-md-12">
      <executor-table
        executors-bind="processor.executors">
      </executor-table>
    </div>
  </div>
</div>
<!-- end of left half -->

<!-- right half -->
<div class="col-md-6">
  <h5>Task Selector</h5>
  <ui-select theme="select2" multiple ng-model="tasks.selected">
    <ui-select-match placeholder="Select tasks...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="task in tasks.available|filter:$select.search">
      <span ng-bind="task"></span>
    </ui-select-choices>
  </ui-select>

  <div ng-if="tasks.selected.length>0">
    <br/>

    <div ng-include src="'views/apps/streamingapp/processor_task_charts.html?'+tasks.selected.length"
         ng-controller="StreamingAppProcessorTaskChartsCtrl"></div>
  </div>
</div>
<!-- end of right half -->